<template>
  <div id='app'>
    <RouterTo :title="title"></RouterTo>


<van-card
  v-for="(c,i) in this.$store.state.shopping" :key="i"

  :num="c.num"
  :price="c.minPrice"
  :desc="c.characteristic"
  :title="c.name"
  :thumb="c.pic"
  :origin-price="c.id"
>
 
  <template #footer>
    <van-button size="mini" @click="remove(i)">删除</van-button>
  </template>
</van-card>









<div class="renqi">
  <h3>猜你喜欢</h3>
 
  <ul>
    <li v-for="(c,i) in list" :key="i" @click="detail(c)">
      <img :src="c.pic" alt="">
      <p>{{c.name}}</p>
      <p>{{c.characteristic}}</p>
      <p >￥{{c.minPrice}}</p>
    </li>
  </ul>

</div>
  </div>
</template>

<script>
import RouterTo from '../../components/hedaerTO/routerTo'

export default {
  data () {
    return {
      list: [],
      list2: [],
      title:'购物车'
    }
  },
  methods: {
    get(){
      this.list=[]
      this.$store.commit('asd')
      this.$request.shoppingCart({
        page:'1',
        pageSize:'28'
      }).then(res=>{
        console.log(res.data.data);
        this.list=res.data.data
        this.list2=res.data.data
        this.list=this.list2.filter((res,i)=>{
           if(i>=this.$store.state.page&&i<=this.$store.state.size){
             console.log(res);
            return res
           }
        
      })
      
      })
    },
    remove(i){
      this.$store.commit('remove',i)
    }
      ,
        detail(c){
        this.$router.push(
          {
            path:this.$routerConfig.detail.path,
            query:{
              id:c.id,
              pic:c.pic,
              name:c.name,
              characteristic:c.characteristic,
              minPrice:c.minPrice,
              }

          }
          
          
          
          )

    }

  },
  mounted() {
    this.get()

  },
  components: {
RouterTo
  }
}
</script>

<style lang='scss'>

.renqi{
  width: 100%;
  display: flex;
  flex-direction: column;
  h3{
    text-align: center;
  margin:20px 0 ;

  }
  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
    li{
      width: 45%;
      display: flex;
      flex-direction: column;

    }
    img{
      width: 100%;
      height: 200px;
    }
    p{
      width: 100%;
      overflow: hidden;
       text-overflow: ellipsis;
      white-space: nowrap;
    }
    p:nth-child(3){
      color: #ccc;
      font-size: 12px;
    }

    p:nth-child(4){
      color: red;
    }
    
  }

}
</style>
